`<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"> <span>{{user.nickname}}</span></i>
            <el-dropdown-menu slot="dropdown">
              <a href="#" @click="logout"><el-dropdown-item>退出</el-dropdown-item></a>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <el-table
              :data="tableData"
              border
              style="width: 100%">
            <el-table-column
                prop="id"
                label="订单编号"
                width="300">
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="充值人"
                width="120">
            </el-table-column>
            <el-table-column
                prop="createdTime"
                label="充值时间"
                width="240">
            </el-table-column>
            <el-table-column
                prop="totalMoney"
                label="金额"
                width="200">
            </el-table-column>
            <el-table-column
                label="操作"
                width="200">
              <template slot-scope="scope">
                <el-button @click="deleteRow(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="mpage"
                         background
                         layout="prev, pager, next"
                         :current-page="currentPage"
                         :page-size="pageSize"
                         :total="total"
                         @current-change=getOrders>
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import Left from "../../components/Left";
export default {
  name: "Orders.vue",
  components: {Left},
  data() {
    return {
      user: this.$store.getters.getUser,
      tableData:[],
      currentPage: 1,
      total: 0,
      pageSize: 5,
    }
  },
  methods:{
    deleteRow(id){
      const _this = this
      _this.$axios.post("/order/delete/"+id).then(res => {
        if(res.data.data === true){
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          });
          //重新刷新列表
          this.getOrders(this.currentPage);
        }else{
          this.$message.error("网络异常，删除失败！");
        }
      })
    },
    handleClick(row) {
      console.log(row);
    },
    getOrders(currentPage){
      const _this = this
      _this.$axios.get("/order/page?currentPage="+currentPage).then(res => {
        _this.tableData = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
      })
    },
    logout() {
      debugger;
      const _this = this
      _this.$store.commit("REMOVE_INFO")
      _this.$router.push("/adminLogin")
    },
  },
  created() {
    this.getOrders(this.currentPage,'','')
  }
};
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>